<template>
  <div>
    <el-dialog title="选择图片" :visible="open" width="800px">
      <div>
        <el-checkbox-group
          v-model="checkList"
          :min="min"
          :max="max"
          style="display: flex; flex-wrap: wrap"
        >
          <el-checkbox
            v-for="item in cdnImgList"
            :label="item.path"
            :key="item.id"
            style="display: flex; margin-right: 12px"
          >
            <el-image
              style="width: 100px; height: 100px"
              :src="item.path"
            ></el-image>
          </el-checkbox>
        </el-checkbox-group>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.page"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
      <div slot="footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="confirmImgList">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { cdnImgList } from "@/api/company/goodsAbout";
export default {
  props: {
    open: {
      type: Boolean,
      default: false,
    },
    min: {
      type: Number,
      default: 0,
    },
    max: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      cdnImgList: [],
      checkList: [],
      queryParams: {
        page: 1,
        pageSize: 20,
      },
      total: null,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      cdnImgList(this.queryParams).then((res) => {
        this.cdnImgList = res.rows;
        this.total = Number(res.total);
      });
    },
    cancel() {
      this.$emit("update:open", false);
    },
    confirmImgList() {
      this.$emit("getChoiceCdn", this.checkList);
      this.checkList = [];
    },
  },
};
</script>
